<template>
	<view class="content" :style="{
		  '--top-bar-height':mp.topBarHeight + 'px',
	      '--safe-area-bottom': safeAreaBottom + 'px'}">
		<!-- #ifndef MP-TOUTIAO -->
		<go-back custom icon="icon-qiehuanqizuo" :can_back="false" @goBack="videoBack"></go-back>
		<!-- #endif -->
		<swiper class="video-player-heihgt-s" :style="'width: 100vw; height: 100vh; background-color: #000;'" @animationfinish="swiperChange" :current="current"
			circular :vertical="true" duration="300" easing-function="linear">
			<swiper-item v-for="(item, index) in displaySwiperList" :key="index">
				<view class="main">
					<!-- #ifndef MP-TOUTIAO -->
					<video v-if="Math.abs(displayIndex - index) == 0 && item.thirdVideoPath" :id="item.episodeId" :data-wxepisode="item.episode"
						class="video-player-heihgt" :show-fullscreen-btn="false" :controls="false" :autoplay="false" :loop="false" :show-play-btn="false"
						@ended="ended" @controlstoggle="controlstoggle" @timeupdate="timeUpdateHandler" style="width: 100vw;" :src="item.thirdVideoPath"
						:show-center-play-btn="false" :enable-progress-gesture="false" @play="videoPlay" @pause="videoPauseC" @error="videoError"
						@loadedmetadata="loadedmetadata">
						<!-- :poster="item.coverPictureUrl" -->
						<view class="custom-slider">
							<customSlider ref="customSliderHandler" @slideStart="slideStart" @slideEnd="slideEnd" @progressHandler="videoPauseOrPlay"
								@longpressHandler="longpressHandler" @touchendHandler="touchendHandler" @moveToPause="moveToPause"
								:videoCurrentTimeSecProps="playInfo[item.episode].videoCurrentTime" :videoTotalTime="playInfo[item.episode].videoDuration"
								:max="windowWidth" :videoTtem="item" :currentAblum="currentAblum" @changeVideo="changeVideo" :video_error="video_error" />
						</view>
					</video>
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<block v-if="Math.abs(displayIndex-index) == 0 && item.thirdVideoPath">
						<video-player :id="item.episodeId" :data-wxepisode="item.episode" class="video-player-heihgt" :cloud-type="1" version="1"
							:album-id="currentAblum.thirdSkitId" :episode-id="item.thirdVideoPath" :controls="false" :autoplay="false" :loop="false"
							:show-play-btn="false" @ended="ended" @controlstoggle="controlstoggle" @timeupdate="timeUpdateHandler" style="width: 100vw;"
							:show-center-play-btn="false" :enable-progress-gesture="false" @play="videoPlay" @pause="videoPauseC" @error="videoError"
							@getsource="loadedmetadata" :poster="currentAblum.coverPictureUrl">
							<!-- :poster="currentAblum.coverPictureUrl" -->
						</video-player>
					</block>
					<view class="custom-slider">
						<customSlider ref="customSliderHandler" @slideStart="slideStart" @slideEnd="slideEnd" @progressHandler="videoPauseOrPlay"
							@longpressHandler="longpressHandler" @touchendHandler="touchendHandler" @moveToPause="moveToPause"
							:videoCurrentTimeSecProps="playInfo[item.episode].videoCurrentTime" :videoTotalTime="playInfo[item.episode].videoDuration"
							:max="windowWidth" :videoTtem="item" :currentAblum="currentAblum" @changeVideo="changeVideo" :video_error="video_error" />
					</view>

					<!-- #endif -->
					<view class="poster" v-if="Math.abs(displayIndex-index)!= 0 || !item.thirdVideoPath" @tap.stop.prevent="tapImage">
						<image class="poster-image" style="width:100vw;" :src="item.coverPictureUrl" mode="widthFix"></image>
						<view class="custom-slider">
							<customSlider ref="customSliderHandler" @slideStart="slideStart" @slideEnd="slideEnd" @progressHandler="videoPauseOrPlay"
								@longpressHandler="longpressHandler" @touchendHandler="touchendHandler" @moveToPause="moveToPause"
								:videoCurrentTimeSecProps="playInfo[item.episode].videoCurrentTime" :videoTotalTime="playInfo[item.episode].videoDuration"
								:max="windowWidth" :videoTtem="item" :currentAblum="currentAblum" @changeVideo="changeVideo" :isplay="false"
								@progressHandlerFalse="tapImage" :video_error="video_error" />
						</view>
					</view>

					<!-- 操作区域 -->
					<view v-if="item.thirdVideoPath && operate_show" class="operate" :class="{ operateshow: islongpressHandler }">
						<!-- #ifdef MP-TOUTIAO -->
						<!-- 关注抖音号 @tap.stop.prevent="followAweme"-->
						<view v-if="mp.systemInfo.platform == 'ios' && mp.systemInfo.uniPlatform == 'mp-toutiao'"
							style="position: relative; margin-bottom: 72rpx;" class="operate-box">
							<view class="share-image dy-iconfont icon-shoucang1" :class="{'share-image-has':hasFollowed}"></view>
							<button style="opacity: 0; position: absolute; top: 0; left: 0; width: 60rpx; height: 60rpx; padding: 0;"
								open-type="openAwemeUserProfile" data-aweme-id="46040733328" />
							<view class="oprarte-title-t">关注</view>
						</view>
						<!-- #endif -->

						<!-- 收藏 -->
						<view v-if="(mp.systemInfo.platform != 'ios' && mp.systemInfo.uniPlatform == 'mp-toutiao') || mp.systemInfo.uniPlatform == 'mp-weixin'"
							style="position: relative; margin-bottom: 72rpx;" class="operate-box" @tap.stop.prevent="goaddition(item)">
							<view class="share-image dy-iconfont icon-tianjiadaoxiaochengxu"></view>
							<view style="opacity: 0; position: absolute; top: 0; left: 0; width: 60rpx; height: 60rpx"></view>
							<view class="oprarte-title-t">收藏小程序</view>
						</view>

						<!-- 分享 -->
						<view style="position: relative; margin-bottom: 72rpx;" class="operate-box">
							<view class="share-image dy-iconfont icon-zhuanfa"></view>
							<button style="opacity: 0; position: absolute; top: 0; left: 0; width: 60rpx; height: 60rpx; padding: 0;" catchtap="shareVideo"
								open-type="share" :data-videoItem="item" />
							<view class="oprarte-title">分享</view>
						</view>
						<view v-if="false" class="circular-progress-box" @tap.stop.prevent="tapProgress">
							<view class="circular-progress">
								<l-circle :percent="item.percentage" size="52px" @change="progressEnd"></l-circle>
								<image class="hb-bg" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/hb-bg.png"></image>
							</view>
							<view class="jinb-z">
								<image class="jinb" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/jinb.png">
								</image>
								<text class="num">{{item.percentageText}}</text>
							</view>
						</view>
					</view>
					<view class="speed" v-if="islongpressHandler">
						<text class="speed-text">2x 快进中</text>
						<text class="dy-iconfont icon-arrow icon-arrow-ani1"></text>
						<text class="dy-iconfont icon-arrow icon-arrow-ani2"></text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- 选集弹窗 -->
		<changeVideoDialog v-if="changeVideoItem" @episodesChangeHandler="onChangeEpisode" :currentVideoId="changeVideoItem.episodeId"
			:currentAblum="currentAblum" @cancel="cancelChangeVideo" :needChangeVideo="showChangeVideoPopup" ref="changeVideoDialogHandler" />
		<view class="peng-name">
			<image class="logo" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/logo2.png" mode="aspectFill">
			</image>
			<!-- #ifdef MP-WEIXIN -->
			<image class="peng-name-image" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/title.png" mode="aspectFill"></image>
			<!-- #endif -->

			<!-- #ifdef MP-TOUTIAO -->
			<image class="peng-name-image MP-TOUTIAO" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/title.png" mode="aspectFill">
			</image>
			<!-- #endif -->
		</view>
		<!-- 支付弹窗 -->
		<view class="pay-info-pop" :class="{ 'animation-pay-show': payInfoPop, 'pay-info-explain': descPop }">
			<view class="mask" @tap.stop.prevent="maskPayHandler"></view>
			<view class="pay-show">
				<view class="header-pay-show">
					<view class="header-left">
						<text style="font-weight: 600; font-size: 32rpx; color: #ffffff; line-height: 45rpx">{{currentAblum.skitName}}</text>
						<text
							style="font-weight: 600; font-size: 26rpx; color: #9ea1a2; line-height: 37rpx; margin-left: 20rpx">解锁本集：{{ originList[originIndex].sellingPrice }}金币</text>
					</view>
					<view class="close dy-iconfont icon-yuyinguanbi" @tap.stop.prevent="maskPayHandler"></view>
				</view>
				<view class="pay-info-ts">虚拟商品购买后不可退换，青少年请在家长陪同下充值</view>
				<view class="balance-pay-show">账户余额：{{usableList.accountBalance}}金币</view>
				<top-up-list ref="payment" :skitId="currentAblum.skitId" explain :list="usableList.goodsList" @getExplain="getExplain" @pay="payIn"
					:episodeId="changeVideoItem.episodeId"></top-up-list>
			</view>
			<view class="skit-desc-pop" :class="{ 'animation-dialog-show': descPop }">
				<!-- <go-back :can_back="false" @goBack="closePop">充值说明</go-back> -->
				<view class="desc-title">
					<view>充值说明</view>
					<view class="close dy-iconfont icon-yuyinguanbi" @tap.stop.prevent="closePop"></view>
				</view>
				<view class="desc">
					<view>1. 虚拟商品不退换。</view>
					<view>2. 金币套餐是巨上头剧场短剧平台为用户提供的一种充值方式，通过购买金币套餐可以在平台上享受更多的服务和特权。</view>
					<view>3. 金币套餐的价格和内容会在平台上进行公示，用户可以根据自己的需求选择适合的套餐。</view>
					<view>4. 购买金币套餐后，金币特直接充值到您的账户中，可以用于解锁付费内容等。</view>
					<view>5. 金币套餐仅限个人使用，禁止转让、出售或以其他形式进行非法交易。一经发现，平台特采取相应的处理措施。</view>
					<view>6. 未满18周岁的未成年人，应在父母或其他监护人的监护、指导、同意下进行付费等相关操作。</view>
					<view>7. 如有任何问题或疑问，您可以随时联系我们的客服团队，我们将尽快为您解答和处理。</view>
					<view>我们秉承为用户提供高质量、安全可靠的服务的宗旨，希望您在巨上头剧场短剧平台上享受到愉快的使用体验。感谢您的支持与理解！</view>
				</view>
			</view>
		</view>
		<uv-popup ref="payPopup" mode="bottom" bgColor="none" overlayOpacity="0.8" zIndex="99999" :safeAreaInsetBottom="false">
			<view class="ios-pop">
				<view class="dy-iconfont icon-yuyinguanbi" @tap.stop.prevent="payPopup"></view>
				<image class="iosNo" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/iosNo.png" mode=""></image>
				<text class="title">由于相关规范，ios功能暂不可用</text>
			</view>
		</uv-popup>
		<!-- 挽留弹窗 -->
		<uv-popup ref="detention_popup" bgColor="none" overlayOpacity="0.7" zIndex="99999" :closeOnClickOverlay="false">
			<view class="detention-pop" v-if="detainment">
				<view class="title">确定放弃随机限时优惠？</view>
				<view class="detention-con">
					<view class="pirce">
						<text style="font-size: 28rpx">¥</text>
						<text>{{ detainment.sellingPrice }}</text>
						<!-- <text style="font-size: 28rpx">{{ detainment.sellingPrice | pirce(1) }}</text> -->
					</view>
					<view class="detention-info">
						<view class="detention-info-1">限时优惠券</view>
						<view class="detention-info-2">{{detainment.remark}}</view>
					</view>
				</view>
				<view class="detention-btn" @tap.stop.prevent="tapDetentionPay">确定协议并支付</view>
				<view class="desc-title-2" @tap.stop.prevent="getExplain">充值说明</view>
				<view class="dy-iconfont icon-yuyinguanbi" @tap.stop.prevent="tapDetention"></view>
			</view>
		</uv-popup>

		<uv-popup ref="welfarePopup" bgColor="none" overlayOpacity="0.7" zIndex="99999" :safeAreaInsetBottom="false" @change="welfarePopupChange">
			<view class="welfare-pop">
				<view class="welfare-pop-bg">
					<image class="ewm" src="https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/qywx.jpg" :show-menu-by-longpress="true"
						@tap="previewPureNetworkImage"></image>
				</view>
				<view class="close-icon dy-iconfont icon-close-full" @tap.stop.passive="closePopwe"></view>
			</view>
		</uv-popup>
		<!-- 观看时长记录 -->
		<bing-countup ref="countUp" :auto-start="false" @change="onCTPChange" />
		<addition-pop ref="addition"></addition-pop>
		<!-- 活动弹窗 -->
		<daily-mission ref="mission" @collect="goaddition" @receiveWelfare="receiveWelfare" @change="dailyChange"></daily-mission>
	</view>
</template>


<script>
	import {
		getVideoPlayerListwx,
		getUsable,
		log,
		pay,
		payState,
		watchTime,
		myDetail,
		payStatett,
		getAward,
		getShelfList,
		isReward
	} from '@/common/api';
	import { rpxToPx } from '@/util/index';
	import customSlider from '@/components/custom-slider/custom-slider.vue';
	import changeVideoDialog from '@/components/change-video-dialog/change-video-dialog.vue';
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import mp from "@/mixins/mp.js";
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import goBack from '@/components/back/back.vue';
	import dailyMission from '@/components/daily-mission/daily-mission.vue';

	const app = getApp();

	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		},
		components: {
			customSlider,
			changeVideoDialog,
			tabbar,
			goBack,
			dailyMission
		},
		data() {
			return {
				tabbarCurrent: 0, //当前索引
				tabBar: app.globalData.tabBar,
				windowHeight: 0,
				windowWidth: 0, // 宽度
				safeAreaBottom: 0,
				showChangeVideoPopup: false, // 显示选集弹框换视频
				circularProgress: false,
				showBottomProgress: false,
				isSlideStart: false,

				operate_show: false,

				displaySwiperList: [],
				currentAblum: null, //剧目信息
				originList: [], // 源数据
				page: 1,
				nodate: true, //true 有数据
				displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
				originIndex: 0, // 记录源数据的下标
				oid: 0,
				playCount: 2, //剩余多少视频加载视频列表
				isplay: true, //是否自动播放下一个视频
				issp: '',
				current: 0,
				videoContext: null,
				videoContextOld: null,

				// 播放信息，处理播放错误，进度条等信息
				playInfo: [],

				videoPause: false,
				needLoading: false,
				changeVideoItem: null,
				islongpressHandler: false,

				isMoveTo: false,

				episodeId: 0,

				descPop: false,
				detainment: null,
				usableList: [],
				payInfoPop: false,
				timeData: {},
				video_error: false,
				fromType: '',

				percentageTimer: null,
				circularTime: 20,
				env: 'develop',
				playStatus: 0,
				shelfList: [],
				is_reward: false,
				video_pause: false,
				hasFollowed: false
			}
		},
		async onLoad(option) {
			let ablum_id = option.ablum_id;
			let episodes_id = option.episodes_id || '';
			let promotionLinkId = option.promotionLinkId || '';
			let promotionid = option.advertiser_id || '';
			let clickId = option.clickid || '';
			this.fromType = option.from || '';
			this.episodeId = episodes_id

			const { windowHeight, windowWidth, safeAreaInsets, screenHeight } = app.globalData?.systemInfo;
			this.windowHeight = windowHeight
			this.windowWidth = Number(windowWidth) == 0 ? rpxToPx(750) : Number(windowWidth)
			this.safeAreaBottom = safeAreaInsets.bottom

			// #ifdef MP-TOUTIAO
			tt.disableUserScreenRecord();
			// #endif


			// #ifdef MP-WEIXIN
			wx.setVisualEffectOnCapture({
				visualEffect: 'hidden'
			})
			// #endif
			this.requestUsable();
			this.gxdd(ablum_id, episodes_id, promotionLinkId, promotionid, clickId)
		},
		onShow() {
			let that = this
			// #ifdef MP-TOUTIAO
			tt.disableUserScreenRecord();
			let envType = tt.getEnvInfoSync().microapp.envType
			that.env = envType == 'development' ? 'develop' : envType == 'production' ? 'release' : 'trial'
			tt.checkFollowAwemeState({
				awemeId: "46040733328",
				success(res) {
					console.log("调用成功", res);
					// that.hasFollowed = res.hasFollowed
				},
				fail(res) {
					console.log("调用失败", res);
				},
			});
			// #endif

			// #ifdef MP-WEIXIN
			wx.setVisualEffectOnCapture({
				visualEffect: 'hidden'
			})
			that.env = wx.getAccountInfoSync().miniProgram.envVersion
			// #endif
			that.requestShelfList()
		},
		onHide() {
			// #ifdef MP-TOUTIAO
			tt.enableUserScreenRecord();
			// #endif

			// #ifdef MP-WEIXIN
			wx.setVisualEffectOnCapture({
				visualEffect: 'none'
			})
			// #endif
			this.countupReset()


			log({
				episodeId: this.originList[this.originIndex].episodeId,
				watchPosition: this.playInfo[this.originIndex].videoCurrentTime,
				playCompleted: this.playInfo[this.originIndex].videoDuration - this.playInfo[this.originIndex].videoCurrentTime <= 5 ? 1 : 0
			});
			if (this.currentAblum && this.originList[this.originIndex]) {
				uni.setStorageSync("videoCurrent", Object.assign({ videoPictureUrl: this.currentAblum.coverPictureUrl, env: this.env }, this.originList[this
					.originIndex]))
			}
			if (this.percentageTimer) clearInterval(this.percentageTimer)
		},
		onUnload() {
			this.countupReset()
			log({
				episodeId: this.originList[this.originIndex].episodeId,
				watchPosition: this.playInfo[this.originIndex].videoCurrentTime,
				playCompleted: this.playInfo[this.originIndex].videoDuration - this.playInfo[this.originIndex].videoCurrentTime <= 5 ? 1 : 0
			});
			if (this.currentAblum && this.originList[this.originIndex]) {
				uni.setStorageSync("videoCurrent", Object.assign({ videoPictureUrl: this.currentAblum.coverPictureUrl, env: this.env }, this.originList[this
					.originIndex]))
			}
			if (this.percentageTimer) clearInterval(this.percentageTimer)
		},
		onShareAppMessage: function(option) {
			const that = this;
			//转发参数
			return {
				// 转发的标题
				// #ifdef MP-WEIXIN
				title: '全场超多短剧免费看',
				path: '/pages/index/index',
				//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，
				//支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				imageUrl: 'https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/share--2.png',
				// #endif

				// #ifdef MP-TOUTIAO
				// taskIds: ['d6j8q1goe1g136iloh'],
				imMsgType: 1,
				templateId: 'd6j8q1goe1g136iloh',
				success(e) {
					console.log("分享成功-MP-TOUTIAO", e, option);
					if (option.from == 'button') {
						that.missionShare()
					}
				},
				fail() {
					console.log("分享失败");
				},
				// #endif
			}
		},
		watch: {
			showChangeVideoPopup: {
				handler(value) {
					if (value) {
						this.videoContext?.pause();
						setTimeout(() => {
							this.circularProgress = value
						}, 100)
					} else {
						this.circularProgress = value
						this.videoContext?.play();
						this.$refs.customSliderHandler[this.displayIndex].hidePauseIcon();
					}
				},
			}
		},
		filters: {
			pirce: function(value1, value2) {
				if (String(value1).indexOf('.' != -1)) {
					return value1
				} else if (value2 == 1) {
					return '.' + value1.split('.')[1];
				} else {
					return value1.split('.')[0];
				}
			}
		},

		methods: {
			gxdd(aid, eid, pid, promotionid, cid) {
				uni.showLoading({
					mask: true,
					title: '正在加载'
				});
				this.page = 1
				this.Recommend(aid, eid, pid, promotionid, cid);
			},

			Recommend(aid, eid, pid, promotionid, cid) {
				this.originList = []
				getVideoPlayerListwx({
					skitId: aid,
					promotionLinkId: pid,
					adId: promotionid,
					clickId: cid
				}).then((res) => {
					if (!res.episodeList || res.episodeList.length < 1) {
						uni.hideLoading();
						this.video_error = true
						uni.showModal({
							title: '提示',
							content: '该剧暂无相关信息',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
						return
					}
					var msg = res.episodeList
					var midlog = res.skitWatch
					let playInfo = [];
					let esid = this.episodeId > 0 ? this.episodeId : midlog.episodeId
					for (let i = 0; i < msg.length; i++) {
						msg[i].episode = i;
						msg[i].index = i;
						msg[i].percentage = 0;
						msg[i].percentageText = '20s后可领10金币';
						msg[i].aid = aid
						msg[i].thirdSkitId = res.thirdSkitId
						if (msg[i].chargeState == 1) {
							msg[i].thirdVideoPath = ''
						}
						this.originIndex = msg.findIndex((i) => i.episodeId == esid)
						this.originList.push(msg[i])
						playInfo.push({});
					}
					this.currentAblum = res
					this.playInfo = playInfo;
					uni.hideLoading();
					this.initSwiperData(this.originIndex, 1);
					this.nodate = false
				}).catch((err) => {
					uni.hideLoading();
				});
			},

			requestShelfList() {
				getShelfList().then((result) => {
					this.shelfList = result.activityList
				});
			},
			/**
			 * 初始一个显示的swiper数据
			 * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
			 */
			initSwiperData(originIndex = this.originIndex, status = 0) {
				// uni.showLoading({
				// 	mask: true,
				// 	title: '视频正在加载中...'
				// });
				// console.log('--------当前数据 Index:', originIndex)
				const originListLength = this.originList.length; // 源数据长度
				const displayList = [];
				displayList[this.displayIndex] = this.originList[originIndex];
				displayList[this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1] = this.originList[originIndex - 1 == -1 ?
					originListLength - 1 : originIndex - 1];
				displayList[this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1] = this.originList[originIndex + 1 == originListLength ? 0 :
					originIndex + 1];
				this.displaySwiperList = displayList;
				this.playStatus = status

				// console.log('--------当前数据 List:', this.displaySwiperList);

				if (this.oid >= this.originList.length) {
					this.oid = 0
				}
				if (this.oid < 0) {
					this.oid = this.originList.length - 1
				}

				//console.log('++++++++++++上一条播放数据 Index:',this.oid)
				this.videoContextOld = uni.createVideoContext(this.originList[this.oid].episodeId, this)
				this.videoContextOld.stop()
				this.changeVideoItem = this.originList[originIndex];
				this.circularTime = 20
				// this.originList[this.originIndex].percentage = 0;
				this.originList[this.originIndex].percentageText = '20s后可领10金币';
				console.log('+++++++++++', this.originList[originIndex].chargeState, originIndex)
				if (this.originList[originIndex].chargeState == 1) {
					this.canPalyPopShow(this.originList[originIndex])
				} else {
					this.video_error = false
				}
				uni.setNavigationBarTitle({
					title: this.currentAblum.skitName + this.originList[originIndex].episodeName
				});
			},
			loadedmetadata(e) {
				console.log('loadedmetadata');
				throttle(() => {
					this.loadedmetadataAwait()
				}, 1000, true)
			},
			async loadedmetadataAwait() {
				await isReward({ "episodeId": this.originList[this.originIndex].episodeId }).then((result) => {
					this.is_reward = result
				});
				console.log('loadedmetadataAwait');
				this.video_pause = false
				this.videoContext = uni.createVideoContext(this.originList[this.originIndex].episodeId, this)
				if (this.currentAblum.skitWatch && this.playStatus == 1) {
					this.videoContext.seek(Number(this.currentAblum.skitWatch.watchPosition))
					this.videoContext.play()
				} else {
					this.videoContext.play()
				}
				this.operate_show = true
				uni.hideLoading();
			},
			swiperChange(event) {
				log({
					episodeId: this.originList[this.originIndex].episodeId,
					watchPosition: this.playInfo[this.originIndex].videoCurrentTime,
					playCompleted: this.playInfo[this.originIndex].videoDuration - this.playInfo[this.originIndex].videoCurrentTime <= 5 ? 1 : 0
				});
				const { current } = event.detail;
				const originListLength = this.originList.length; // 源数据长度
				this.current = current
				// =============向后==========
				if (this.displayIndex - current == 2 || this.displayIndex - current == -1) {
					this.originIndex = this.originIndex + 1 == originListLength ? 0 : this.originIndex + 1;
					this.displayIndex = this.displayIndex + 1 == 3 ? 0 : this.displayIndex + 1;
					//console.log('+++',this.originIndex)
					this.oid = this.originIndex - 1
					this.initSwiperData(this.originIndex);
				}
				// ======如果两者的差为-2或者1则是向前滑动============
				else if (this.displayIndex - current == -2 || this.displayIndex - current == 1) {
					this.originIndex = this.originIndex - 1 == -1 ? originListLength - 1 : this.originIndex - 1;
					this.displayIndex = this.displayIndex - 1 == -1 ? 2 : this.displayIndex - 1;
					//console.log('---',this.originIndex)
					this.oid = this.originIndex + 1
					this.initSwiperData(this.originIndex);
				}
			},
			ended() {
				log({
					episodeId: this.originList[this.originIndex].episodeId,
					watchPosition: this.playInfo[this.originIndex].videoCurrentTime,
					playCompleted: 1
				});

				if (this.isplay) {
					if (this.displayIndex < 2) {
						this.current = this.displayIndex + 1
					} else {
						this.current = 0
					}
					console.log('显示swiper Index:', this.displayIndex, this.current)
				}
				let that = this
				clearInterval(that.percentageTimer)
				// that.originList[this.originIndex].percentage = 0
			},
			// 播放
			videoPlay(e) {
				let that = this
				if (that.video_pause && that.originList[this.originIndex].percentage == 100) {
					return
				}
				that.video_pause = false
				that.countupStart()
				clearInterval(that.percentageTimer)
				if (!that.is_reward) {
					that.originList[this.originIndex].percentageText = '今日无可领取奖励';
					return
				}
				let tims = 0
				that.percentageTimer = setInterval(() => {
					tims += 1
					that.originList[this.originIndex].percentage += 1
					if (tims % 5 == 0 && that.circularTime > 0) {
						that.circularTime--
						that.originList[this.originIndex].percentageText = that.circularTime + 's后可领10金币';
					}
					if (that.originList[this.originIndex].percentage == 100) {
						clearInterval(that.percentageTimer)
						that.circularTime = 20
						that.originList[this.originIndex].percentageText = '金币已到账';
						setTimeout(() => {
							that.originList[this.originIndex].percentageText = '观看下集继续领金币';
						}, 1500)
					}
				}, 200)
			},
			// 暂停
			videoPauseC() {
				let that = this
				that.video_pause = true
				that.countupPause()
				clearInterval(that.percentageTimer)
			},
			videoError(e) {
				console.error('video_error1', e);
				uni.hideLoading();
				this.video_error = true
			},
			// 20s 领奖
			progressEnd(e) {
				if (e == 100) {
					clearInterval(this.percentageTimer)
					getAward({
						"activityId": this.shelfList[1].activityId,
						"everyGoldNum": this.shelfList[1].everyGoldNum,
						"episodeId": this.originList[this.originIndex].episodeId
					}).then((result) => {});
				}
			},
			controlstoggle(e) {
				this.issp = e.detail.show
			},
			onCTPChange(e) {
				this.timeData = e;
			},
			//计时开始
			countupStart() {
				let that = this
				that.$nextTick(() => {
					that.$refs.countUp.start();
				})
			},
			// 计时暂停
			countupPause() {
				let that = this
				that.$nextTick(() => {
					that.$refs.countUp.pause();
				})
			},
			// 计时重置
			countupReset() {
				let that = this
				that.$nextTick(() => {
					that.watchDuration()
					that.$refs.countUp?.reset();
				})
			},
			// 记录观看的时长
			watchDuration() {
				if (this.timeData.seconds > 0) {
					watchTime({ watchTime: this.timeData.seconds }).then((res) => {})
				}
			},

			timeUpdateHandler(e) {
				const {
					currentTime,
					duration
				} = e.detail;

				const episode = e.target.dataset.wxepisode;
				let playInfo = this.playInfo;

				playInfo[episode].videoDuration = Math.floor(duration);
				playInfo[episode].videoCurrentTime = currentTime;

				this.playInfo = [...playInfo]

				if (duration - currentTime <= 0.5 && duration - currentTime > 0) {
					this.$refs.customSliderHandler[this.displayIndex].touchendHandler();
				}
			},
			videoBack() {
				if (this.currentAblum && this.originList[this.originIndex]) {
					uni.setStorageSync("videoCurrent", Object.assign({ videoPictureUrl: this.currentAblum.coverPictureUrl }, this.originList[
						this.originIndex]))
				}
				if (this.fromType == 'share') {
					app.navigationTo('pages/index/index');
				} else {
					uni.navigateBack();
				}
			},


			// 手势相关

			// 进度条滑动开始事件
			slideStart(e) {
				this.isSlideStart = true
			},

			// 拖动进度条暂停视频
			moveToPause() {
				this.videoContext.pause();
				this.showBottomProgress = false
				this.isMoveTo = true
			},

			// 进度条滑动结束事件
			slideEnd(e) {
				const { videoCurrentTimeSec } = e;
				this.isMoveTo = false
				this.videoContext.seek(videoCurrentTimeSec);
				this.isSlideStart = false
				this.videoContext.play();
				setTimeout(() => {
					this.showBottomProgress = true
				}, 500)
			},
			// 视频暂停/继续播放
			videoPauseOrPlay(e) {
				const { videoPause } = e;
				this.videoContext[videoPause ? 'play' : 'pause']();
			},
			// 视频长按
			longpressHandler(e) {
				const { videoPause } = e;
				this.showBottomProgress = false
				setTimeout(() => {
					this.videoContext.playbackRate(2);
					this.islongpressHandler = true
				}, 200)
			},
			// 视频长按结束
			touchendHandler(e) {
				const { videoPause } = e;
				this.videoContext.playbackRate(1);
				this.islongpressHandler = false
				setTimeout(() => {
					this.showBottomProgress = true
				}, 500)
			},
			// 显示选集弹窗
			changeVideo(e) {
				// this.needLoading = true;
				// this.needLoading = false;
				this.showChangeVideoPopup = true;
			},
			// 选集
			onChangeEpisode(e) {
				const {
					episodeitem
				} = e;
				this.cancelChangeVideo();
				this.originIndex = episodeitem.index
				// #ifndef MP-TOUTIAO
				this.displayIndex = 0
				this.displaySwiperList = [];
				setTimeout(() => {
					this.initSwiperData(this.originIndex);
				}, 500)
				// #endif

				// #ifdef MP-TOUTIAO
				this.initSwiperData(this.originIndex);
				// #endif
			},
			canPalyPopShow(data, recharge = 0, result) {
				uni.showLoading({
					mask: true,
					title: '正在解锁中'
				});
				if (recharge != 0) {
					setTimeout(() => {
						let unlockAllOrder = result.unlockAllOrder
						unlockAllOrder.forEach((item, index) => {
							this.originList[index].thirdVideoPath = item.thirdResourcePath
							this.originList[index].chargeState = 0
							this.originList[index].unlockState = 0
							this.$set(this.currentAblum.episodeList[index], 'chargeState', 0)
							this.$set(this.currentAblum.episodeList[index], 'unlockState', 0)
							this.$set(this.currentAblum.episodeList[index], 'thirdVideoPath', item.thirdResourcePath)
							setTimeout(() => {
								this.payInfoPop = false;
								this.initSwiperData(this.originIndex);
								uni.hideLoading();
							}, 200)
						})
					}, 1000)
				} else {
					pay({
						orderType: 1,
						episodeId: data.episodeId
					}).then((result) => {
						if (result.unlockOrder.unlockState == 0) {
							uni.hideLoading();
							this.originList[this.originIndex].thirdVideoPath = result.unlockOrder.thirdResourcePath
							this.originList[this.originIndex].chargeState = 0
							this.originList[this.originIndex].unlockState = 0
							this.$set(this.currentAblum.episodeList[data.index], 'chargeState', 0)
							this.$set(this.currentAblum.episodeList[data.index], 'unlockState', 0)
							this.$set(this.currentAblum.episodeList[data.index], 'thirdVideoPath', result.unlockOrder
								.thirdResourcePath)
							this.payInfoPop = false;
							this.initSwiperData(this.originIndex);
							this.requestUsable()
						} else {
							this.requestUsable().then(() => {
								uni.hideLoading();
								this.payInfoPop = true;
							})
							this.countupReset()
						}
					}).catch((err) => {
						this.requestUsable().then(() => {
							uni.hideLoading();
							this.payInfoPop = true;
						})
						this.countupReset()
					});
				}
			},
			// 隐藏选集弹窗
			cancelChangeVideo() {
				this.showChangeVideoPopup = false
			},
			// 收藏
			goaddition() {
				this.$refs.addition.show();
			},
			receiveWelfare() {
				this.$refs.welfarePopup.open();
			},
			dailyChange(e) {
				let { show } = e
				if (show) {
					setTimeout(() => {
						this.circularProgress = show
					}, 100)
				} else {
					setTimeout(() => {
						this.circularProgress = show
					}, 50)
				}
			},

			closePopwe() {
				this.$refs.welfarePopup.close();
			},
			previewPureNetworkImage() {
				uni.previewImage({
					urls: ['https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/qywx.jpg']
				});
			},
			tapProgress() {
				this.$refs.mission.goMission();
			},
			welfarePopupChange(e) {
				if (!e.show) {
					this.$refs.mission.goMission();
				}
			},

			// 关注抖音
			followAweme() {
				tt.followAwemeUser({
					awemeId: "46040733328",
					success: (res) => {
						if (res.followed) {
							// tt.showToast({
							// 	title: `您已关注我们`,
							// 	icon: "none",
							// });
						} else {
							console.log('未关注');
						}
					},
				});
			},
			tapImage() {
				throttle(() => {
					this.canPalyPopShow(this.originList[this.originIndex])
				}, 1000, true)
			},

			// 支付------------------

			requestUsable() {
				return new Promise((resolve, reject) => {
					getUsable({ 'skitId': this.currentAblum?.skitId }).then((result) => {
						this.usableList = result;
						const index = this.usableList?.goodsList.findIndex((i) => i.isRetain == 0);
						this.detainment = this.usableList?.goodsList[index]
						resolve()
					})
				});
			},
			getExplain() {
				this.descPop = true;
			},
			closePop() {
				this.descPop = false;
			},
			maskPayHandler() {
				if (this.descPop) {
					this.closePop()
				} else {
					this.payInfoPop = false;
					if (this.detainment) {
						this.$refs.detention_popup.open();
					}
				}
			},
			payPopup() {
				that.$refs.payPopup.close();
			},
			// 支付成功回调
			async payIn(e) {
				let that = this
				that.codeTime = 14
				switch (e.payform) {
					case 'tt':
						if (e.platform != 'ios') this.ttAndroidPay(e)
						else this.ttIosPay(e)
						break;
					case 'wx':
						const { pullPayState } = await myDetail();
						e = Object.assign({ pullPayState: pullPayState }, e)
						if (e.platform != 'ios') this.wxAndroidPay(e)
						// else this.wxIosPay(e)
						
						else this.ttIosPay(e)
						break;
				}
			},


			// 抖音安卓支付
			ttAndroidPay(params) {
				let that = this
				tt.requestOrder({
					data: params.data, // 请勿在前端对data做任何处理
					byteAuthorization: params.byteAuthorization, // 请勿在前端对byteAuthorization做任何处理
					success: (res) => {
						console.log('requestOrder成功', res);
						tt.getOrderPayment({
							orderId: res.orderId,
							success: (r) => {
								console.log('getOrderPayment成功', r);
								that.codeCount(Object.assign({ outOrderNo: r.orderId }, params))
							},
							fail: (res) => {
								console.log(res)
							},
						});

					},
					fail: (res) => {
						console.log(res)
					},
				});
			},
			// 抖音ios支付
			ttIosPay(params) {
				let that = this
				that.$refs.payPopup.open();
			},
			// 微信安卓支付
			wxAndroidPay(params) {
				let that = this
				wx.requestVirtualPayment({
					signData: params.signData,
					paySig: params.paySig,
					signature: params.signature,
					mode: params.mode,
					success(res) {
						that.codeCount(params)
					},
					fail({ errMsg, errCode }) {
						if (errCode == -2) {} else {
							uni.showModal({
								title: "友情提示",
								content: '系统错误，充值失败',
								showCancel: false
							});
						}
					}
				})
			},
			// 微信ios支付
			wxIosPay(params) {
				let that = this
				if (params.pullPayState == 0) {
					that.$refs.payPopup.open();
				} else {
					// that.codeCount(params)
					wx.requestPayment({
						timeStamp: params.timeStamp,
						nonceStr: params.nonceStr,
						package: params.package,
						signType: params.signType,
						paySign: params.paySign,
						success(res) {
							that.codeCount(params)
						},
						fail({ errMsg, errCode }) {
							if (errMsg == 'requestPayment:fail cancel') {} else {
								uni.showModal({
									title: "友情提示",
									content: '系统错误，充值失败',
									showCancel: false
								});
							}
						}
					})
				}
			},
			codeCount(params) {
				uni.showLoading({ title: '正在查询支付状态', mask: true });
				setTimeout(() => {
					this.codeTimer = setInterval(this.setIntervalFun(params), 3000);
				}, 500);
			},
			setIntervalFun(params) {
				return () => {
					if (this.codeTime <= 0) {
						uni.hideLoading();
						uni.showToast({
							title: '状态查询失败',
							icon: 'error',
							duration: 2000
						});
						this._clearCount()
					} else {
						/*未请求到接口，继续请求数据*/
						this.goPayState(params)
						this.codeTime--;
					}
				}
			},
			goPayState(params) {
				// #ifndef MP-TOUTIAO
				payState(params.orderId).then((result) => {
					if (result.payState == 1) {
						uni.hideLoading();
						this._clearCount()
						this.requestUsable()
						this.canPalyPopShow(this.originList[this.originIndex], params.rechargeType, result)
					}
				}).catch((err) => {
					uni.hideLoading();
					this._clearCount()
				})
				// #endif

				// #ifdef MP-TOUTIAO
				payStatett({
					outOrderNo: params.orderId,
					orderId: params.outOrderNo
				}).then((result) => {
					if (result.payState == 1) {
						uni.hideLoading();
						this._clearCount()
						this.requestUsable()
						this.canPalyPopShow(this.originList[this.originIndex], params.rechargeType, result)
					}
				}).catch((err) => {
					uni.hideLoading();
					this._clearCount()
				})
				// #endif
			},
			//清除定时器
			_clearCount() {
				clearInterval(this.codeTimer);
				this.codeTimer = null;
				this.codeTime = 0;
			},
			// 挽留
			tapDetention() {
				this.$refs.detention_popup.close();
			},
			tapDetentionPay() {
				const index = this.usableList?.goodsList.findIndex((i) => i.isRetain == 0);
				this.$refs.payment.setCurrent(index)
				this.tapDetention()
				this.$refs.payment.payInfo()
			},
		}
	}
</script>

<style lang="scss">
	page {
		color: white;
		background: #000;
	}

	.main {
		position: relative;
		height: calc(100vh - var(--safe-area-bottom) - 100rpx);
		z-index: 2
	}

	.peng-name {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: calc(var(--safe-area-bottom) + 100rpx);
		background: #000;
		margin: 0 auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		z-index: 1;

		.logo {
			display: inline-block;
			margin-right: 6rpx;
			width: 54rpx;
			height: 54rpx;
		}

		.peng-name-image {
			display: inline-block;
			// width: 108rpx;
			// height: 45rpx;
			width: 105rpx;
			height: 33rpx;

			&.MP-TOUTIAO {
				width: 174rpx;
				height: 33rpx;
			}
		}
	}

	.video-info {
		width: 750rpx;
		height: 720rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
		position: absolute;
		bottom: 198rpx;
		z-index: 1000;
		transform: translate3d(0, 0, 0);
	}

	.info-con {
		z-index: 1000;
		transform: translate3d(0, 0, 0);
		position: absolute;
		bottom: 198rpx;
		margin-left: 24rpx;
		margin-bottom: 24rpx;
	}

	.circular-progress-box {
		position: relative;
		z-index: 2;
		width: 300rpx;
		margin-right: -22rpx;

		// transform: scale(0.83) translateX(17%);
		// z-index: 1000;
		// position: absolute;
		// top: 253rpx;
		// left: 12rpx;
		.circular-progress {
			float: right;
			margin-right: 12rpx;
			position: relative;

			.hb-bg {
				position: absolute;
				z-index: 1;
				width: 44px;
				height: 44px;
				top: 4px;
				left: 4px;
			}
		}

		.jinb-z {
			min-width: 130rpx;
			max-width: 320rpx;
			// width: 100%;
			height: 44rpx;
			// background: rgba(255, 255, 255, 0.2);
			background: rgba(0, 0, 0, 0.5);
			border-radius: 22rpx;
			border: 1rpx solid #71767A;
			backdrop-filter: blur(8px);
			padding: 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			position: absolute;
			z-index: 1001;
			bottom: -22rpx;
			right: 0;
			// left: 50%;
			// margin-top: -22rpx;
			// transform: translateX(-50%);


			.jinb {
				width: 20rpx;
				height: 20rpx;
				margin-right: 4rpx;
			}

			.num {
				font-weight: 600;
				font-size: 26rpx;
				color: #FFFFFF;
				line-height: 37rpx;
				text-align: start;

			}
		}

		.bg {
			position: absolute;
			background: rgba(0, 0, 0, 0.4);
			top: 5px;
			left: 5px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}

	.operate {
		z-index: 1000;
		position: absolute;
		bottom: 198rpx;
		right: 0rpx;
		position: absolute;
		// height: 382rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		margin-right: 24rpx;
		margin-bottom: 52rpx;
		opacity: 1;
		transition: all .5s;
	}

	.operateshow {
		opacity: 0;
	}

	.operate image {
		// width: 72rpx;
		// height: 72rpx;
	}

	.operate button {
		padding: 0;
	}

	.operate .share-image {
		// width: 90rpx;
		// height: 90rpx;
		width: 60rpx;
		height: 60rpx;
		font-size: 60rpx;
		color: #FFFFFF;
		margin-bottom: 16rpx;
	}

	.operate .share-image-has {
		color: #FFE500;
	}

	.operate-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.oprarte-title {
		width: 52rpx;
		height: 37rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 37rpx;
		text-align: center;
	}

	.oprarte-title-t {
		width: 78rpx;
		height: 74rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 37rpx;
		text-align: center;
	}

	.oprarte-num {
		text-align: center;
		text-shadow: 0px 2rpx 2rpx rgba(22, 24, 35, 0.20);
		font-family: Proxima Nova;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 34rpx;
		/* 130.769% */
		margin-top: -20rpx;
	}

	.video-title {}

	.video-text {
		width: 530rpx;
		text-shadow: 0px 2rpx 2rpx rgba(0, 0, 0, 0.15);
		/* CN/15_H4_Regular */
		font-family: PingFang SC;
		font-size: 30rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 12rpx;
	}

	.video-player-heihgt {
		height: calc(100vh - var(--safe-area-bottom) - 100rpx - 4rpx);
	}

	.video-player-heihgt-s {
		height: calc(100vh - var(--safe-area-bottom) - 100rpx);
	}

	.change-video {
		z-index: 999;
		position: absolute;
		bottom: 118rpx;
		width: 702rpx;
		height: 80rpx;
		padding: 0 24rpx;
		margin: 0 auto;
		color: var(--text-icon-dark-const-text-inverse-2, var(--text-const-text-inverse-2, rgba(255, 255, 255, 0.90)));
		text-align: center;
		font-family: PingFang SC;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 16rpx;
		background: rgba(41, 41, 41, 0.34);
		transform: translate3d(0, 0, 0);
		opacity: 1;
		transition: all .5s;
	}

	.change-video-show {
		opacity: 0;
	}

	.change-video-icon image {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.change-video-icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.arrow image {
		width: 20rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.change-video-con {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.speed {
		z-index: 999;
		position: absolute;
		bottom: 70rpx;
		left: 50%;
		transform: translateX(-50%);
		margin: 0 auto;
	}

	.speed-text {
		font-size: 32rpx;
		margin-right: 20rpx;
	}

	.icon-arrow-ani1 {
		font-size: 28rpx;
		opacity: 1;
		animation: speedAnimation1 0.3s ease 0s infinite alternate;
	}

	.icon-arrow-ani2 {
		font-size: 28rpx;
		opacity: .5;
		animation: speedAnimation2 0.3s ease .2s infinite alternate;
	}

	.custom-slider {
		position: absolute;
		bottom: 0;
		z-index: 998;
		margin: 0 auto;
		// opacity: .7;
		transition: all .3s;

		&.isMoveTo {
			bottom: 15rpx;
			opacity: 1;

			/deep/ .highlight-spot {
				top: 24rpx;
				width: 7rpx;
				height: 7rpx;
			}
		}
	}


	.full-screen-btn {
		z-index: 999;
		width: 176rpx;
		height: 64rpx;
		border-radius: 32rpx;
		border: 0.5px solid var(--line-color-dark-const-line-inverse, rgba(255, 255, 255, 0.20));
		background: var(--bg-color-dark-bg-inverse-3, rgba(41, 41, 41, 0.34));
		position: absolute;
		bottom: 388rpx;
		left: 274rpx;
		color: var(--text-icon-dark-const-text-inverse-2, var(--text-const-text-inverse-2, rgba(255, 255, 255, 0.90)));
		font-family: PingFang SC;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: translate3d(0, 0, 0);
	}

	.full-screen-btn ::before {
		content: "";
		position: absolute;
		top: -20rpx;
		bottom: -20rpx;
		left: -20rpx;
		right: -20rpx;
	}

	.full-screen-btn image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
	}

	.hidden {
		display: none;
	}

	.full-screen-swiper {
		transform: rotate(90deg);
	}

	.loading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1999;
		background-color: black;
	}

	.VideoDialogLoading {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1999;
	}

	.pay-info-pop {
		width: 100vw;
		height: 100vh;
		position: fixed;
		bottom: -100vh;
		left: 0;
		z-index: 2000;
		transition: all 0.3s;

		&.animation-pay-show {
			bottom: 0;
		}

		&.pay-info-explain {
			z-index: 999999;
		}

		.mask {
			width: 100vw;
			height: 100vh;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0);
		}

		.pay-show {
			position: absolute;
			// height: 1204rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			background: rgba(0, 0, 0, 0.8);
			backdrop-filter: blur(10px);
			box-sizing: border-box;
			padding: 36rpx 24rpx 196rpx;

			.header-pay-show {
				display: flex;
				align-items: center;
				margin-bottom: 16rpx;

				.header-left {
					flex: 1;
				}
			}

			.pay-info-ts {
				margin-bottom: 20rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: rgba(255, 255, 255, 0.6);
				line-height: 28rpx;
			}

			.balance-pay-show {
				margin-bottom: 40rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #ffffff;
				line-height: 37rpx;
			}
		}

		.skit-desc-pop {
			position: fixed;
			bottom: -80vh;
			left: 0;
			z-index: 999999;
			background-color: rgba(0, 0, 0, 1);
			padding: 0 36rpx;
			padding-top: 43rpx;
			width: calc(100vw + 2rpx + 2rpx);
			height: 80vh;
			transition: all 0.3s;
			box-sizing: border-box;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			backdrop-filter: blur(10px);
			margin-left: -2rpx;
			border: 2rpx solid #5D5E5E;
			border-bottom: none;

			&.animation-dialog-show {
				bottom: 0 !important;
			}

			.desc-title {
				font-weight: 900;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 45rpx;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.dy-iconfont {
					font-weight: 900;
					font-size: 28rpx;
					color: #ffffff;
				}
			}

			.desc {
				font-weight: 400;
				font-size: 26rpx;
				color: rgba(255, 255, 255, 0.8);
				line-height: 37rpx;
			}
		}
	}

	.detention-pop {
		width: 610rpx;
		height: 560rpx;
		background: #ffffff;
		border-radius: 32rpx;
		box-sizing: border-box;
		padding: 54rpx 0 60rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;

		.dy-iconfont {
			position: absolute;
			font-weight: 900;
			right: 36rpx;
			top: 36rpx;
			font-size: 28rpx;
			color: #000000;
		}

		.title {
			font-family: '阿里妈妈数黑体 Bold' !important;
			font-weight: 900;
			font-size: 42rpx;
			color: #c79644;
			line-height: 50rpx;
			text-align: center;
		}

		.detention-con {
			width: 619rpx;
			height: 296rpx;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/detention.png');
			background-repeat: no-repeat;
			background-size: cover;
			box-sizing: border-box;
			padding: 95rpx 0 80rpx 97rpx;
			display: flex;
			align-items: center;

			.pirce {
				width: 132rpx;
				height: 86rpx;
				font-weight: 900;
				font-size: 58rpx;
				color: #ff6f00;
				line-height: 86rpx;
				text-align: center;
				margin-right: 35rpx;
			}

			.detention-info {
				.detention-info-1 {
					font-weight: 900;
					font-size: 32rpx;
					color: #462b0c;
					line-height: 45rpx;
				}

				.detention-info-2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #edac00;
					line-height: 33rpx;
					margin-top: 24rpx;
				}
			}
		}

		.detention-btn {
			width: 523rpx;
			height: 96rpx;
			background: linear-gradient(313deg, #fdda94 0%, #fff6e5 68%, #ffe8c0 100%);
			border-radius: 18rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #462b0c;
			line-height: 96rpx;
			text-align: center;
		}

		.desc-title-2 {
			width: 523rpx;
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #462b0c;
			line-height: 37rpx;
			text-align: center;
			opacity: .3;
			box-sizing: border-box;
			padding-right: 24rpx;
		}
	}

	.ios-pop {
		width: 100vw;
		height: 591rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		backdrop-filter: blur(10px);
		position: relative;
		box-sizing: border-box;
		padding-top: 78rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.dy-iconfont {
			position: absolute;
			font-size: 28rpx;
			top: 41rpx;
			right: 43rpx;
		}

		.iosNo {
			width: 260rpx;
			height: 260rpx;
			margin-bottom: 57rpx;
		}

		.title {
			font-weight: 400;
			font-size: 28rpx;
			color: #000;
			line-height: 40rpx;
			text-align: center;
		}
	}

	.icon-yuyinguanbi {
		padding: 6rpx;
	}

	.welfare-pop {
		position: relative;

		.welfare-pop-bg {
			width: 688rpx;
			height: 1040rpx;
			background-image: url('https://pengtou-1322587508.cos.ap-shanghai.myqcloud.com/static/peng-jc/welfare-ewm.png');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 0 0;

			.ewm {
				position: absolute;
				top: 361rpx;
				left: 144rpx;
				width: 400rpx;
				height: 400rpx;
			}
		}

		.close-icon {
			font-size: 20rpx;
			width: 40rpx;
			height: 40rpx;
			color: #FFFCFC;
			border: 1rpx solid #FFFFFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 38rpx auto 0;
		}
	}



	@keyframes speedAnimation1 {
		0% {
			opacity: 1;
		}

		100% {
			opacity: .5;
		}
	}

	@keyframes speedAnimation2 {
		0% {
			opacity: .5;
		}

		100% {
			opacity: 1;
		}
	}
</style>